<template>
  <div class="box">
    <div class="title">积分商场管理系统</div>
    <div class="dlk">
      <div style="margin: 20px" />
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.psd" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>


</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter()
const labelPosition = ref('right')

const formLabelAlign = reactive({
  name: '',
  psd: '',
})
const submitForm = () => {
  //      axios({
  //        url:"http://localhost:3001/admin",
  //        method:"post",
  //        params:{
  //          user:Number(formLabelAlign.name) ,
  //          pwd: Number(formLabelAlign.psd)
  //        }
  //      }).then((res)=>{
  //      if(res.data.code==200){
  //  router.push({
  //            path:'/home/index'
  //        })

  //      }
  //      })
  //        console.log(formLabelAlign.name,formLabelAlign.psd);
  //        resetForm()
  router.push({
    path: '/home'
  })

}
const resetForm = () => {
  formLabelAlign.name = '',
    formLabelAlign.psd = ''
}
</script>

<style scoped>
.el-form-item {
  margin-top: 30px;

}

.el-input {
  width: 260px;

}

.el-form {
  padding-top: 10px;
}

.title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 40px;
  font-weight: bolder;
  color: white;
}

.box {
  height: 100%;
  width: 100%;
  background-color: rgb(20, 20, 20);
  box-sizing: border-box;

}

.dlk {
  width: 450px;
  height: 300px;
  background-color: rgb(48, 60, 75);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  border-top: 20px solid rgb(63, 133, 237);



}
</style>>

